<template>
  <div class="manger">
    <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/index/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/index/manager' }">用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户信息</el-breadcrumb-item>
    
  </el-breadcrumb>
  <el-card class="box-card">
    <el-input
      v-model="input3"
      placeholder="请输入用户信息"
      class="input-with-select"
    >
      <template #append>
        <el-button :icon="Search" @click.prevent="search" />
      </template>
    </el-input>
    <el-button type="primary" v-show="status == false" @click.prevent="addlist">添加用户</el-button>
    <el-button type="primary" :icon="ArrowLeft" v-show="status == true" @click.prevent="changeStatus">返回上一页</el-button>
    <el-table :data="queryInfo.infolist" stripe style="width: 100%" v-show="status == false">
    <el-table-column type="index" label="#" width="80" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="phone" label="电话" width="180" />
    <el-table-column prop="email" label="邮箱" />
    <!-- <el-table-column prop="status" label="状态">
      <template slot-scope="scope">
        
        <el-switch v-model="scope.row.status" @change="userStateChanged(scope.row)"></el-switch>
      </template>
    </el-table-column> -->
    <el-table-column prop="rolename" label="用户权限" />
    <el-table-column #default="scope">
      <el-row>
        <el-col :span="8">
          <el-tooltip content="编辑" placement="top"  :enterable="false">
            <el-button type="primary" :icon="Edit" class-name="button" @click.prevent="editlist(scope.row)"/>
          </el-tooltip> 
        </el-col>
        <el-col :span="8">
          <el-tooltip content="个人信息" placement="top" :enterable="false">
            <el-button type="success" :icon="Share" class-name="button"/>
          </el-tooltip>
        </el-col>
        <el-col :span="8">
          <el-tooltip content="删除" placement="top" :enterable="false">
            <el-button type="danger" :icon="Delete" class-name="button" @click.prevent="deleteRow(scope.row)"/>
          </el-tooltip>
        </el-col>
      </el-row>
    </el-table-column>
    </el-table>
   
    <el-table :data="searchData.list" style="width: 100%" v-show="status == true">
      <el-table-column type="index" label="#" width="80" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="phone" label="电话" width="180" />
      <el-table-column prop="email" label="邮箱"  width="180"/>
      <el-table-column prop="rolename" label="用户权限"  width="180"/>
      
          <el-tooltip content="编辑" placement="top"  :enterable="false">
            <el-button type="primary" :icon="Edit" class-name="button" @click.prevent="editlist(scope.row)"/>
          </el-tooltip> 
        
    </el-table>
    <el-pagination
      :current-page="queryInfo.currentPage"
      :page-size="queryInfo.pagesize"
      :page-sizes="queryInfo.pagesizes"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.list.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-show="status == false"
    />
  </el-card>
  </div>

  
</template>

<script setup>
import { Delete, Edit, Share} from '@element-plus/icons-vue'
import { ArrowLeft,ArrowRight } from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import {useRoute , useRouter} from 'vue-router'
import { ElMessageBox,ElMessage } from 'element-plus'
import axios from 'axios';
import  {user_list,user_delete,user_search} from '../../utils/api'
const input3 = ref('')
const status = ref(false)
const router = useRouter()
var tableData = ref({list:[]})
var searchData = reactive({list:[]})
var queryInfo = ref({//需要改
  infolist:[],
  //当前页数
  currentPage:1,
  //当前每页显示多少条数据
  pagesize:6,
  pagesizes:[1, 2, 3, 6, 10]
  
})
onMounted(()=>{
//   axios.get('/api/user/list').then((res)=>{
//   tableData.value.list = res.data.list;
//   console.log(tableData.value.list);

// })
  pageChange();
})

var pageChange=()=>{
  user_list().then((res)=>{
  tableData.value.list = res.data.list;
  listPage();
})

}

var listPage=()=>{
  queryInfo.value.infolist = tableData.value.list.slice( 
    (queryInfo.value.currentPage - 1) * queryInfo.value.pagesize,
    queryInfo.value.currentPage * queryInfo.value.pagesize)
    console.log(queryInfo.value.infolist);
}

var deleteRow=(row)=>{
  ElMessage({
    message: '此用户信息已删除',
    grouping: true,
    type: 'success',
  })
 
  user_delete({id:row.id}).then((res)=>{
    // tableData.value.list = res.data.list;
    pageChange();
  })
}

var search=()=>{
  if(input3.value != ''){
    status.value = true;
    user_search({phone:input3.value}).then((res)=>{
      searchData.list = res.data.list;
      // console.log(res.data.list);
    })
  }
  input3.value = '';
}

var changeStatus=()=>{
  status.value = false;
}
var addlist=()=>{
  router.push('/index/addInfo')
}
var editlist=(row)=>{
  router.push({path:'/index/editInfo',query:row})
}
//持久化状态

//监听pagesize改变的事件
var handleSizeChange=(val)=>{
  console.log(val);
  queryInfo.value.pagesize = val;
  queryInfo.value.currentPage = 1;
  pageChange();
  
}
//监听页码值改变的事件
var handleCurrentChange=(val)=>{
  console.log(val);
  queryInfo.value.currentPage = val;
  pageChange();
  
} 

</script>

<style lang="scss" scoped>
.input-with-select{
  width: 600px;
  margin: 0px 30px 0 10px;
}
.box-card{
  margin-top: 30px;
  
  
}
.el-table{
  margin-top: 15px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.el-pagination{
  margin-top: 20px;
}
</style>